<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" session="false" %>
<%
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>event</title>
<script type="text/javascript">
    // testDefaultEvent(event)
    // event是全局变量，名字不能改
	function testDefaultEvent(e){
    	// IE中的事件对象统一是event，Firefox不是
		e = e||event;
    	alert(e);
		//console.dir(e);
	}
    max = 0;
	function testDefaultEvent1(){
    	alert(1);
    	max++;
    	if(max>3){
    		// 取消绑定 IE dttachEvent
    		$("p4").removeEventListener("click", testDefaultEvent1, false);
    	}
		//console.dir(e);
	}

	function $(id){
    	return document.getElementById(id);
    }

    // 绑定多个监听函数
    function testBindEvent(){
    	// 判断是IE还是Firefox
    	// if(window.navigator.userAgent ...
    	if(document.all){
    		// IE
        	$("p4").attachEvent("onclick", testDefaultEvent);
        	$("p4").attachEvent("onclick", testDefaultEvent);
    	}else{
    		// false 不冒泡传播
        	$("p4").addEventListener("click", testDefaultEvent, false);
        	$("p4").addEventListener("click", testDefaultEvent1, false);
    	}
     }

    // 阻止事件，比如：达到某个条件才让click事件才执行，不满足就阻止
    // form 提交的 onsubmit="return false;"
	document.oncontextmenu = function(e){
    	e = e||event;
    	// 函数非undifined
    	if(e.preventDefault){
    		e.preventDefault();
    	}else{
    		e.returnValue = false;
    	}
    	alert(2);
    };

    // 标准写法：这样写法会给响应函数传参数
    window.onload = function(){
    	document.getElementById("p2").onclick = testDefaultEvent;
    	testBindEvent();
    };

</script>
</head>
<body>
<p id="p4" >p4</p>
<p id="p1" onclick="testDefaultEvent(event);">p1</p>
<p id="p2" onmouseover="alert(this.id);">p2</p>
<p id="p3" onmouseover="alert($('p3').id);">p3</p>

</body>
</html>
